<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="zh">
<head>
    <%@include file="/lyear/common/head.jsp" %>
    <style>
        .lyear-wrapper {
            position: relative;
        }

        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
        }

        .lyear-login:after {
            content: '';
            min-height: inherit;
            font-size: 0;
        }

        .login-center {
            background: #fff;
            min-width: 29.25rem;
            padding: 2.14286em 3.57143em;
            border-radius: 3px;
            margin: 2.85714em;
        }

        .login-header {
            margin-bottom: 1.5rem !important;
        }

        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
        }

        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }

        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }
    </style>
</head>

<body>
<div class="row lyear-wrapper" style="background-image: url(${pageContext.request.contextPath}/lyear/images/login-bg-2.jpg); background-size: cover;">
    <div class="lyear-login">
        <div class="login-center">
            <div class="login-header text-center">
                <h2>用户注册</h2>
            </div>

            <form action="#!" method="post" id="userRegistForm">
                <div class="form-group has-feedback feedback-left">
                    <input type="text" id="account" placeholder="登录名" class="form-control" name="account" id="account" onblur="checkAccount()"/>
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                    <div id="account_prompt"></div>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="text" id="email" placeholder="邮箱" class="form-control"  name="email" id="email" onblur="checkEmail()"/>
                    <span class="mdi mdi-email form-control-feedback" aria-hidden="true"></span>
                    <div id="email_prompt"></div>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="密码" class="form-control" id="password1"  name="password" onblur="checkPassword1()"/>
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                    <div id="password1_prompt"></div>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="password" placeholder="确认密码" class="form-control" id="password2" onblur="checkPassword2()"/>
                    <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
                    <div id="password2_prompt"></div>
                </div>
                <div class="form-group has-feedback feedback-left">
                    <input type="text" placeholder="验证码" style="width: 73%;display: inline-block;" class="form-control" id="verifyCodeInput" name="verifyCode" onblur="checkVerifyCode()"/>
                    <span class="mdi mdi-verified form-control-feedback" aria-hidden="true"></span>
                    <img src="${pageContext.request.contextPath}/account/getVerifyCode" class="pull-right" id="captcha" style="width: 27%;cursor: pointer;display: inline-block" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
                    <div id="verifyCode_prompt"></div>
                </div>

                <div class="form-group">
                    <button id="submit" class="btn btn-block btn-primary" type="button" onclick="regist()">立即注册</button>
                </div>
            </form>
            <div>
                <span style="color: black">已有账号！</span><a href="index.jsp">点此登录</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/lyear/js/bootstrap.min.js"></script>
<script type="text/javascript">

    let accountRes = false;
    /**
     * 验证账户
     * @returns {boolean}
     */
    function checkAccount() {
        let account = $("#account").val();
        // 非空验证
        if(account == ""){
            $("#account_prompt").html("请输入登录名！").css("color","red").show();
            return accountRes = false;
        }
        let reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{4,16}$/;
        // 格式验证：字母、数字和汉字
        if (reg.test(account) == false) {
            $("#account_prompt").html("长度要求4-16位,大小写字母、数字和汉字组成！").css("color","red").show();
            return accountRes = false;
        }
        // 隐藏错误提示信息
        // $("#account_prompt").hide(2000);
        $.ajax({
            url:"${pageContext.request.contextPath}/account/selectUserByAccount",
            data: {"account": account},
            type: "post",
            dataType: "json",
            success: function (res) {
                if (res.code == 500) {
                    $("#account_prompt").html(res.msg).css("color","red").show();
                    return accountRes = false;
                } else {
                    $("#account_prompt").html(res.msg).css("color","green").hide(2000);
                    return accountRes = true;
                }
            }

        })
    }


    let emailRes = false;
    /**
     * 验证邮箱
     */
    function checkEmail() {
        let email = $("#email").val();
        // 非空验证
        if(email == ""){
            $("#email_prompt").html("请输入邮箱！").css("color","red").show();
            return emailRes = false;
        }
        // 格式验证
        let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (reg.test(email) == false) {
            $("#email_prompt").html("邮箱格式不正确！").css("color","red").show();
            return emailRes = false;
        }
        // 隐藏错误提示信息
        $("#email_prompt").hide(2000);
        $("#email_prompt").html("邮箱格式正确。").css("color","green").hide(2000);
        return emailRes = true;
    }

    let password1Res =false;
    /**
     * 验证密码
     * */
    function checkPassword1() {
        let password1 = $("#password1").val();
        // 非空验证
        if(password1 == ""){
            $("#password1_prompt").html("请输入密码！").css("color","red").show();
            return password1Res = false;
        }
        // 格式验证
        let reg = /^[a-zA-Z0-9]{6,10}$/;
        if (reg.test(password1) == false) {
            $("#password1_prompt").html("密码不能含有非法字符，长度在6-10之间").css("color","red").show();
            return password1Res= false;
        }
        // 隐藏错误提示信息
        $("#password1_prompt").hide(2000);
        $("#password1_prompt").html("密码格式正确。").css("color","green").hide(2000);
        return password1Res= true;
    }

    let password2Res = false;
    /**
     * 验证确认密码
     * @returns {boolean}
     */
    function checkPassword2() {
        let password2 = $("#password2").val();
        // 非空验证
        if(password2 == ""){
            $("#password2_prompt").html("请再次密码！").css("color","red").show();
            return password2Res = false;
        }
        // 验证两次密码一致性
        let password1 = $("#password1").val();
        if (password1 != password2) {
            $("#password2_prompt").html("两次输入的密码不一致！").css("color","red").show();
            return password2Res= false;
        }
        // 输入正确提示
        $("#password2_prompt").hide(2000);
        $("#password2_prompt").html("密码格式正确。").css("color","green").hide(2000);
        return password2Res= true;
    }

    let verifyCodeRes = false;
    /**
     * 校验验证码
     */
    function checkVerifyCode() {
        let verifyCode = $("#verifyCodeInput").val();
        // 非空验证
        if(verifyCode == ""){
            $("#verifyCode_prompt").html("请输入验证码！").css("color","red").show();
            return verifyCodeRes = false;
        }
        // 长度和格式验证
        let reg = /^[a-zA-Z0-9]{4}$/;
        // 格式验证：字母、数字和汉字
        if (reg.test(verifyCode) == false) {
            $("#verifyCode_prompt").html("验证码错误！").css("color","red").show();
            return verifyCodeRes = false;
        }
        $.ajax({
            url:"${pageContext.request.contextPath}/account/checkVerifyCode",
            data: {verifyCode: verifyCode},
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.code == 200) {
                    $("#verifyCode_prompt").html(res.msg).css("color","green").hide(2000);
                    return verifyCodeRes = true;
                } else {
                    $("#verifyCode_prompt").html(res.msg).css("color","red").show();
                    return verifyCodeRes = false;
                }
            }
        })
    }


    /**
     * 用户注册
     */
    function regist() {
        //先检查各字段是否正确
        if(!(accountRes && emailRes && password1Res && password2Res && verifyCodeRes )){
            return alert("请输入正确的数据！");
        }
        // 如果数据正确，则禁止用户多次点击注册
        $("#submit").html("正在注册中...");
        $("#submit").attr("disabled","true");
        // $("#account").attr("disabled","true");
        // $("#email").attr("disabled","true");
        // $("#password1").attr("disabled","true");
        // $("#password2").attr("disabled","true");
        // $("#verifyCodeInput").attr("disabled","true");
        // $("#captcha").attr("sec","");

        $.ajax({
            url: '${pageContext.request.contextPath}/account/regist',// 获取自己系统后台用户信息接口
            data: $("#userRegistForm").serialize(),  //对表单序列化
            type: "POST",
            dataType: "json",
            success: function (data) {
                if (data) {
                    if (data.code == "200") { //判断返回值，这里根据的业务内容可做调整
                        // setTimeout(function () {//做延时以便显示登录状态值
                        //     alert(data.msg);
                        // }, 100);
                        alert(data.msg);
                    } else {
                        alert(data.msg);//显示登录失败的原因
                        $("#submit").html("立即注册");
                        $("#submit").css("disabled","false");
                        return false;
                    }
                }
            },
            error: function (data) {
                showMsg(data.msg);
            }
        })

    }

    /**
     *     监听回车键提交
     */
    $(function () {
        document.onkeydown = keyDownSearch;

        function keyDownSearch(e) {
            // 兼容FF和IE和Opera
            let theEvent = e || window.event;
            let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
            if (code == 13) {
                $('#submit').click();//具体处理函数
                return false;
            }
            return true;
        }
    });
</script>
</body>
</html>
